<!--退宿-->
<template>
  <div class="log">
    <basic-container>
      <avue-crud
          ref="crud"
          :data="tableData"
          :option="tableOption"
          :page.sync="page"
          :table-loading="tableLoading"
          @on-load="getList"
          @search-change="searchChange"
          @search-reset="searchReset"
          @size-change="sizeChange"
          @current-change="currentChange"
          @row-del="handleDel">
        <template slot-scope="scope" slot="menu">
          <el-button icon="el-icon-edit" size="mini" type="primary" @click="handleDel(scope.row)">退宿</el-button>
        </template>
      </avue-crud>
      <!--自定义退宿弹窗-->
      <el-dialog
          :visible.sync="dialogEditVisible"
          title="退宿操作"
          width="35%"
          @close="dictItemVisible"
          :close-on-click-modal="false">
        <el-form :rules="rules">
          <!--获取学生属性-->
          <h3>确定为:</h3>
          <h3 ref="tableData">{{ this.currentrow.pname + this.currentrow.dname + this.currentrow.name }}同学进行退宿操作吗?</h3>

          <el-form-item label="学生属性" prop="identity">
            <el-col :span="16">
              <el-select disabled v-model="value" placeholder="请选择" style="margin-left: 12px">
                <el-option
                    v-for="item in userOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="分配时间组" prop="gateTimeId">
            <el-col :span="15">
              <el-select v-model="value1" placeholder="请选择">
                <el-option
                    v-for="item in timeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :span="24">
              <p style="color: red">退宿后,该生的宿舍通行权限即刻失效,且恢复对应走读生通行权限</p>
            </el-col>
            <el-col :span="24" style="text-align: center">
              <el-button
                  class="filter-item"
                  size="small"
                  @click="dictItemVisible">取消
              </el-button>
              <el-button
                  class="filter-item"
                  size="small"
                  type="primary"
                  @click="handleUpdate()">确认
              </el-button>
            </el-col>
          </el-form-item>
        </el-form>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import {changeOutHostObj, outHostObj, studentUserObj} from '@/api/hostel/outHost'
// import {tableOption} from '@/const/crud/hostel/outhost'
import {timePlan} from '@/api/pass/timeplan'
import {mapGetters} from 'vuex'
import {HOSTEL_OUT, HOSTEL_SEX} from '@/const/Hostel'
import {PERSON_DETAILS} from "@/const/personDict";


export default {
  name: 'outHost',
  data() {
    return {
      tableData: [],
      searchForm: {},
      currentrow:{},
      dialogEditVisible:false,
      identity:'',
      userOptions: [{
        value:'',
        label: '',
      }],
      value:'40',
      timeOption: [{
        value: '',
        label: '',
      }],
      value1: '',
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableLoading: false,
      rules: {  //必填项（验证规则）
        identity: [
          {required: true, trigger: "none"}
        ],
        gateTimeId: [
          {required: true, trigger: "none"}
        ],
      },
      // tableOption: tableOption,
      tableOption: {
        border: true,  //竖线边框
        index: true,  //表格序号
        indexLabel: '序号',  //序号的标题
        stripe: true,  //是否显示表格的斑马条纹
        menuAlign: 'center',  //菜单栏对齐方式
        menuWidth: 180,  //操作菜单栏的宽度
        align: 'center',  //表格列对其方式
        emptyBtnText: '重置', //清空按钮文案
        searchMenuSpan: 6,  //搜索框长度
        // searchSpan: 5,
        addBtn: false,  //添加按钮
        delBtn: false,  //行内删除按钮
        editBtn: false,  //行内编辑按钮
        viewBtn: false, //是否显示查看按钮
        selection: false,  //表格是否显示可选
        excelBtn: false,  //表格导出按钮是否显示
        refreshBtn: true,  //表格上面小的 刷新按钮
        columnBtn: true,  //表格上面小的 列表显隐按钮
        searchBtn: true,  //搜索按钮
        menuType: 'button',//操作栏样式为按钮
        props: {
          label: 'label',
          value: 'value'
        },
        column: [
          {
            label: '人员id',  //字段标题
            prop: 'studentid',  //字段名称
            search: false,  //搜索是否显示
            hide: true,  //展示页面是否显示
            viewDisplay: false,  //详情时是否显示
          },
          {
            label: '姓名',
            prop: 'name',
            search: true,
            dicData: HOSTEL_OUT,  //引入字典
          }, {
            label: '学号',
            prop: 'number',
            dicData: HOSTEL_OUT,
          }, {
            label: '性别',
            prop: 'sex',
            search: true,
            type: 'select',  //搜索框显示类型
            dicData: HOSTEL_SEX,
            change: (value) => {
              this.searchForm.sex = value.value
              this.getList(this.page, this.searchForm)
            },
          },{
            label: '校区',
            prop: 'campusDeptArea',
            dicData: PERSON_DETAILS,
            editDisplay: false,
          }, {
            label: '年级',
            prop: 'pname',
            type: 'select',
            dicData: HOSTEL_OUT,
          },

          {
            label: '年级',
            prop: 'deptId',
            search: true,
            type: 'select',
            hide: true,
            // searchClearable: false,
            defaultExpandAll: true,
            dicUrl: '/admin/dept/PermissionTree',
            cascaderItem: ['deptName'],
            dicFormatter: (res) => {
              let gradeArr = res.data
              let value = []
              if(gradeArr.length> 0){
                for(let i of gradeArr){
                  if(i.typeNum == "2" && i.isLock === false){
                    value.push(i)
                  }
                }
                console.log(value)
                return value
              }
            },
            dicMethod: 'get',
            props: {
              label: 'name',
              value: 'id'
            },
            change: (value) => {
              this.searchForm.deptId = value.value
              this.getList(this.page, this.searchForm)
            },
          },
          {
            label: '班级',
            prop: 'dname',
            dicData: HOSTEL_OUT,
          },
          {
            label: '班级',
            prop: 'deptName',
            search: true,
            filter: false,
            type: 'select',
            hide: true,
            // searchClearable: false,
            defaultExpandAll: true,
            dicUrl: '/campus/sysdept/detpTree/{{key}}/1,2,3',
            dicFormatter: (res) => {
              // console.log(res.data[0].children)
              return res.data[0].children;//返回字典的层级结构
            },
            dicMethod: 'get',
            props: {
              label: 'name',
              value: 'deptId',
            },
            change: (value) => {
              this.searchForm.deptId = value.value
              this.getList(this.page, this.searchForm)
            },
          },
          {
            label: '楼栋',
            prop: 'buildingName',
            // hide: true,
            search: true,
            type: 'select',
            dicUrl: '/campus/building/selectAll',
            dicMethod: 'get',
            props: {
              label: 'buildingName',
              value: 'buildingName'
            },
            change: (value) => {
              this.searchForm.buildingName = value.value
              this.getList(this.page, this.searchForm)
            },
          }, {
            label: '宿舍号',
            prop: 'dormNumber',
            search: true,
            dicData: HOSTEL_OUT,
          },
          {
            label: '时间方案',
            prop: 'timeMangeId',
            search: false,
            hide: true,
            dicData: HOSTEL_OUT,
          },
          // {
          //   label: '年级/班级',
          //   prop: 'deptId',
          //   search: true,
          //   filter: false,
          //   type: 'tree',
          //   hide: true,
          //   dicUrl: '/campus/sysdept/detpTree/1/2,3',
          //   dicMethod: 'get',
          //   // dicData: [],
          //   props: {
          //     label: 'name',
          //     value: 'deptId',
          //   },
          //   change: (value) => {
          //     if (value.value === '') {
          //       return;
          //     }
          //     this.searchForm.deptId = value.value
          //     this.getList(this.page, this.searchForm)
          //   },
          // }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  methods: {

    //展示表格
    getList(page, params) {
      this.tableLoading = true
      outHostObj(Object.assign({
        current: page.currentPage,
        size: page.pageSize
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      })
    },

    //退宿的操作及弹窗
    handleDel: function (row){
      // debugger
      this.createUserOptions()
      this.dialogEditVisible = true
      this.currentrow = row
      let param = {
        timeType: 0,
        size: 999,
        timePlanName: '走'
      }
      timePlan(param).then(res => {
        this.timeData = res.data.data.records
        this.timeOption = this.timeData.map(item => {
          return {value: `${item.id}`, label: `${item.timePlanName}`};
        })
        console.log(this.timeOption)
      })
      // const confirmText = ['确定为:', '同学进行退宿操作吗?','退宿后,该生的宿舍通行权限即刻失效,且恢复对应走读生通行权限']
      // const newDatas = []
      // const h = this.$createElement
      // for (const i in confirmText) {
      //   newDatas.push(h('p', null, confirmText[i]))
      // }
      // this.$confirm(
      //     // '退宿操作',
      //     // '退宿操作',
      //     // {
      //     //   title:'退宿操作',
      //     //   message: h('p', null, [
      //     //     h('p',{style:'font-weight:bold;font-size:16px'},'确定为:'),
      //     //     h('h3',null,row.pname+row.dname+row.name+'同学进行退宿操作吗?'),
      //     //     h('p', {style:'color:red'},'退宿后,该生的宿舍通行权限即刻失效,且恢复对应走读生通行权限'),
      //     //   ]),
      //     //   showCancelButton: true,
      //     //   confirmButtonText: '确定',
      //     //   cancelButtonText: '取消',
      // // }
      // )
      //     .then(function () {
      //   console.log(row)
      //   return changeOutHostObj(row)
      // }).then(() => {
      //   this.$message.success('退宿成功!')
      //   this.getList(this.page)
      // })
    },
    //退宿弹窗相关
    dictItemVisible: function () {
      this.dialogEditVisible = false
      this.value1 = ''
    },
    createUserOptions(){
      //获取所有的身份数据
      let param = {
        'groupNum':2
      }
      studentUserObj(param).then(res => {
        if (res.data.code === 0) {
          this.userData = res.data.data;
          this.userOptions = this.userData.map(item => {
            return {value:`${item.id}`,label: `${item.name}`};
          })
        }
      });
    },
    //退宿的操作及弹窗
    handleUpdate: function () {
      if (this.value === null) {
        this.$message.error('提交失败,请选择学生身份')
        return;
      }
      if (this.value1 === '') {
        this.$message.error('提交失败,请选择要分配的时间组')
        return;
      }
      let param = {
        'studentId': this.currentrow.studentid,
        'name': this.currentrow.name,
        'number': this.currentrow.number,
        'sex': this.currentrow.sex,
        'grade': this.currentrow.pname,
        'className': this.currentrow.dname,
        'building': this.currentrow.buildingName,
        'dormNumber': this.currentrow.dormNumber,
        'timeMangeId': this.currentrow.timeMangeId,
        'identity':this.value,
        'gateTimeId':this.value1,
        'deptId': this.currentrow.deptId,
      }
      changeOutHostObj(param).then(res => {
        this.dialogEditVisible = false
        this.$message.success('退宿成功!')
        this.getList(this.page)
      })
    },


    //搜索页面内容
    searchChange(form, done) {
      if (form.deptName !== undefined) {
        form.deptId = form.deptName
        // console.log(form.deptId)
        this.getList(this.page, form)
        done()
      }
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },

    //点击每页多少条会调size-change方法回调
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },

    //点击页码会调用current-change方法回调当前页
    currentChange(current) {
      this.page.currentPage = current
    },

    //清空时重置页面
    searchReset(){
      this.searchForm = {};
      this.getList(this.page)
    }
  }
}
</script>
<style scoped>
/deep/.el-dialog__header{
  margin-left: 20px;
  /*padding: 0;*/
}
/deep/.avue-crud__menu{
  display: none;
}
/deep/.el-form-item__label{
  text-align: left;
}
/deep/.avue-form__row {
  padding-left: 2px !important;
  padding-right: 36px !important;
}
/deep/.avue-form__menu--center{
  text-align: left;
}
h3{
  margin: 0;
  padding: 0 0 15px 0;
}
p{
  margin: 0;
  padding: 0;
}
</style>
